// 文档加载事件
window.addEventListener("DOMContentLoaded", function () {
  // 轮播图
  new Swiper(".banner", {
    direction: "horizontal", // 垂直切换选项
    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });

  // console.log(getEle("#service"));
  // console.log(getEles("#service ui li"));

  // 功能二：动态渲染页面数据-模拟真实接口数据操作

  /* 步骤：
    1、定义数据源-使用模拟数据，相当于后端返回给前端的数据
    2、遍历拼接html结构，并且添加到指定位置*/

  // 1.定义数据源
  let sDate = [
    {
      imgurl: "./images/service01.svg",
      litle: "API私有化服",
      info: "可部署本地&专有云的Web API",
    },
    {
      imgurl: "./images/service02.svg",
      litle: "源码云监测",
      info: "实时代码托管、威胁情报监控",
    },
    {
      imgurl: "./images/service03.svg",
      litle: "源码有赢",
      info: "一站式营销活动服务平台",
    },
    {
      imgurl: "./images/service04.svg",
      litle: "YuanMa API",
      info: "API开发者协作平台",
    },
  ];

  //2、遍历拼接html结构，并且添加到指定位置
  sDate.forEach(function (v) {
    getEle("#serviceList").innerHTML += `
        <li>
          <img src="${v.imgurl}" alt="">
          <div>
              <h1 class="f22 c18 plr20  fw">${v.litle}</h1>
              <p class="c6 plr20  f12 lh34">${v.info}</p>
              <a href="#" class="c127 f12 iblock plr20 mt15 ">去搜索</a>
          </div>
      </li>`;
  });

  //功能二：api分类 动态渲染页面数据
  // 1.定义数据源
  let apiDate = [
    {
      imgurl: "./images/api01.svg",
      litle: "生活服务 ",
    },
    {
      imgurl: "./images/api02.svg",
      litle: "金融科技",
    },
    {
      imgurl: "./images/api03.svg",
      litle: "交通地理",
    },
    {
      imgurl: "./images/api04.svg",
      litle: "充值缴费",
    },
    {
      imgurl: "./images/api05.svg",
      litle: "数据智能",
    },
    {
      imgurl: "./images/api06.svg",
      litle: "企业工商",
    },
    {
      imgurl: "./images/api07.svg",
      litle: "应用开发",
    },
    {
      imgurl: "./images/api08.svg",
      litle: "电子商务",
    },

    {
      imgurl: "./images/apic1.svg",
      litle: "吃喝玩乐",
    },
    {
      imgurl: "./images/apic2.svg",
      litle: "文娱视频",
    },
  ];

  //遍历数据结构
  apiDate.forEach(function (v) {
    getEle("#apiList").innerHTML += `
        <li>
               <img src="${v.imgurl}" alt="" class="mt35">
               <p class="mt15">${v.litle}</p>
             </li>
        `;
  });

  // 功能四：api分类特效
  // 批量给li 添加移入移出事件
  // 移入事件

  getEles("#apiList li").forEach(function (v) {
    let imgOIdUrl = "";
    v.addEventListener("mouseover", function () {
      console.log(v);
      v.style = `
                background-color:#2f7ee9;
                 color:#fff;`;
      imgOIdUrl = v.firstElementChild.src;
      console.log(imgOIdUrl.replace(".svg", "-c.svg"));
      v.firstElementChild.src = imgOIdUrl.replace(".svg", "-c.svg");
    });

    //  移出事件
    v.addEventListener("mouseout", function () {
      v.style = ``;
      v.firstElementChild.src = imgOIdUrl;
    });
  });
//API智能接入 
// let smartDate=[
//     {
//         imgurl: "./images/master-item-icon-01.svg",
//         litle: "AAPI智能接入",
//         info: "通过可视化界面配置，即可实现无代码、免开发快速接入"
//     },
//     {
//         imgurl: "./images/master-item-icon-02.svg",
//         litle: "数据库生成API",
//         info: "无代码配置的方式将主流数据库输出为微服务API接口"
//     },
//     {
//         imgurl: "./images/master-item-icon-03.svg",
//         litle: "API智能构建",
//         info: "多个API通过可视化的流程编排与业务逻辑重组，融合成新的API"
//     },
//     {
//         imgurl: "./images/master-item-icon-04.svg",
//         litle: "API智能路由",
//         info: "根据入参属性进行智能分配，实现路由管理，控制API调用流向"
//     },
//     {
//         imgurl: "./images/master-item-icon-05.svg",
//         litle: "简化API开发",
//         info: "助力开发者创建API、批量测试、跟踪开发进度、自动生成文档"
//     },
//     {
//         imgurl: "./images/master-item-icon-06.svg",
//         litle: "API开放共享",
//         info: "将核心能力以API形式对外输出，赋能到多领域、多场景的应用程序中"
//     }
// ];
// smartDate.forEach(function(v){
//     console.log(v);
//     getEle("#apiSmart").innerHTML+= `
//     <li class="lh20 mt15 rel ">
//     <h3 class="fw sp">  <img src="${v.imgurl}" class="abs"> ${v.litle}  </h3>
//     <p class="f14 ">${v.info}</p>
//     </li>
//     `
//   });





 // 小轮播图
 // 1、获取
let itemBox=document.querySelectorAll('#unicorn .items')
// 2、全局索引
let index=0
// 3、绑定第一个盒子
itemBox[index].style.display='block';
// 4、定时器
window.setInterval(function(){
  if(index==itemBox.length-1){
    index=-1
  }
  index++;
itemBox.forEach(function(v){
  v.style.display='';
})
itemBox[index].style.display='block';
},1000);





























});


